<template>
  <div class="app_content_container">
    <Breadcrumb :items="['镜像']" />
    <BaseTable
      ref="baseTableRef"
      :apiUrl="getImageList"
      :columns="columns"
      placeholder="请输入名称"
      :isShowAddBtn="false"
      isRowSelection
      @handleSelectionChange="(val) => (selectedKeys = val)"
      height="calc(100vh - 180px)"
    >
      <template #name="{ record }">
        <ga-link :hoverable="false" @click="$emit('findDetail', record)">
          {{ record?.name || "-" }}
        </ga-link>
      </template>
      <template #disk="{ record }">
        <span v-if="record?.disks[0]?.size">
          {{ record?.disks[0]?.bootable ? "系统盘" : "数据盘" }}:
        </span>
        {{ record?.disks[0]?.size || 0 }}
      </template>
      <template #operatBtns>
        <ga-button
          :type="isdisable ? 'secondary' : 'primary'"
          status="danger"
          :disabled="isdisable"
          style="margin-left: 8px"
          @click="handleDelete(selectedKeys)"
        >
          删除
        </ga-button>
      </template>
      <template #action="{ record }">
        <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
        <ga-link status="danger" @click="handleDelete([record?.id])">删除</ga-link>
      </template>
    </BaseTable>
    <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { columns } from "./columns";
import { getImageList, deleteImage } from "@/api/image";
import { warningModal } from "@/hooks/useWarningModal";
import { Message } from "@garco-design/web-vue";
import addOrEdit from "./addOrEdit.vue";

const selectedKeys = ref([]);
const isdisable = computed(() => selectedKeys.value?.length === 0);
// 处理删除方法
const baseTableRef = ref(null);
const handleDelete = async (records) => {
  const ids = records.map((item) => item.id || item);
  console.log("ids", ids);
  warningModal(`确定要删除数据吗`, async () => {
    try {
      const { code } = await deleteImage(ids);
      if (code === 20000) Message.success("操作成功");
      baseTableRef.value.fetchData();
    } catch (err) {
      console.log(err);
    }
  });
};
</script>

<style lang="scss" scoped></style>
